<template>
    <u-tabbar>
        <view class="flex aic jcsa w100">
            <view class="bottonView">
                <view class="miniv" @click="gopage('/pages/shop/shopDetail')"><u-icon name="photo" color="#2979ff"
                        size="20"></u-icon>店铺
                </view>
                <view class="miniv"><u-icon name="photo" color="#2979ff" size="20"></u-icon>收藏
                </view>
                <view class="miniv"><u-icon name="photo" color="#2979ff" size="20"></u-icon>客服
                </view>
            </view>
            <view class="flex buyBtn">
                <view class="left">立即购买</view>
                <view class="right">添加购物车</view>
            </view>
        </view>
    </u-tabbar>
</template>

<script setup>
    const gopage = (url) => {
        uni.navigateTo({
            url
        })
    }
</script>

<style lang="scss" scoped>
    .bottonView {
        display: flex;
        font-size: 24rpx;

        // flex column aic mgr40
        .miniv {
            @include flex-box-set();
            flex-direction: column;
            padding: 5rpx 20rpx;
            margin-right: 20rpx;
        }
    }

    .buyBtn {
        .btn {
            padding: 18rpx 20rpx;
            font-size: 26rpx;
            color: #fff;
        }

        .left {
            @extend .btn;
            border-radius: 10rpx 0 0 10rpx;
            background-color: #a0f0f0;
        }

        .right {
            @extend .btn;
            border-radius: 0 10rpx 10rpx 0;
            background-color: red;
        }
    }
</style>